<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>评测报告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./lib/css/layui.css" media="all">
    <meta name=”viewport” content=”width=device-width, initial-scale=3, maximum-scale=1″>
</head>

<body>
    <div class="root">
        <div class="no-print">
            <div class="print-button">
                <button class="layui-btn layui-btn-sm" style="background-color:#989595;" onclick="print()"><i
                        class="layui-icon">&#xe63c;</i></button>
            </div>
        </div>
        <div id="exportDiv">
            <div class="page">
                <div style="font-weight: bold; text-align: center; padding: 20px; font-size: 36px;color: #FA9F49;">
                    专注力复核评估报告</div>
                <div class="title"> <i></i>基本信息 </div>
                <div class="baseContent">
                    <table style="width: 100%;">
                        <tr>
                            <td class="tableTitle">儿童姓名</td>
                            <td><span id="name"></span></td>
                            <td class="tableTitle">儿童性别</td>
                            <td><span id="sex"></span></td>
                        </tr>
                        <tr>
                            <td class="tableTitle">测试年龄</td>
                            <td><span id="age"></span></td>
                            <td class="tableTitle">评测次数</td>
                            <td><span id="testCount"></span></td>
                        </tr>
                        <tr>
                            <td class="tableTitle">上次评测</td>
                            <td><span id="pTest"></span></td>
                            <td class="tableTitle">本次评测</td>
                            <td><span id="nTest"></span></td>
                        </tr>
                    </table>
                </div>
                <div class="page">
                    <div class="title"> <i></i>评估结果</div>
                    <div class="pageContent">
                        <table class="resultTable">
                            <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                                <td rowspan="2" colspan="2">测试项目</td>
                                <td colspan="1">上次评测</td>
                                <td colspan="1">本次评测</td>
                                <td rowspan="2" style="width: 30%;">日常表现</td>
                            </tr>
                            <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                                <td>结果</td>
                                <td>结果</td>
                            </tr>
                            <tr>
                                <td rowspan="4" style="width:60px">听觉</td>
                                <td style="width:80px">听觉广度</td>
                                <td><span id="plevel0"></span>
                                    <!-- <span id="pscore0"></span> -->
                                </td>
                                <td> <span id="nlevel0"></span>
                                    <!-- <span id="nscore0"></span> -->
                                </td>
                                <td class="remark">上课的时候老师讲的长知识点听的全面，效率高。</td>
                            </tr>
                            <tr>
                                <td>听觉记忆</td>
                                <td><span id="plevel1"></span>
                                    <!-- <span id="pscore1"></span> -->
                                </td>
                                <td> <span id="nlevel1"></span>
                                    <!-- <span id="nscore1"></span> -->
                                </td>
                                <td class="remark">课堂内容听过就能记得住，心算能力强。</td>
                            </tr>
                            <tr>
                                <td>听觉加工</td>
                                <td><span id="plevel2"></span>
                                    <!-- <span id="pscore2"></span> -->
                                </td>
                                <td> <span id="nlevel2"></span>
                                    <!-- <span id="nscore2"></span> -->
                                </td>
                                <td class="remark">可以边听课边快速记笔记，听写速度好。</td>
                            </tr>
                            <tr>
                                <td>听觉稳定</td>
                                <td><span id="plevel3"></span>
                                    <!-- <span id="pscore3"></span> -->
                                </td>
                                <td> <span id="nlevel3"></span>
                                    <!-- <span id="nscore3"></span> -->
                                </td>
                                <td class="remark">听讲或与人沟通时不易受外界干扰。</td>
                            </tr>
                            <tr>
                                <td rowspan="5">视觉</td>
                                <td>视觉分辨</td>
                                <td><span id="plevel4"></span>
                                    <!-- <span id="pscore4"></span> -->
                                </td>
                                <td> <span id="nlevel4"></span>
                                    <!-- <span id="nscore4"></span> -->
                                </td>
                                <td class="remark">能轻易区分相似事物，不易出现看错或丢漏问题。</td>
                            </tr>
                            <tr>
                                <td>视觉广度</td>
                                <td><span id="plevel5"></span>
                                    <!-- <span id="pscore5"></span> -->
                                </td>
                                <td> <span id="nlevel5"></span>
                                    <!-- <span id="nscore5"></span> -->
                                </td>
                                <td class="remark">看书时能一目十行，阅读速度快，不爱丢三落四。</td>
                            </tr>
                            <tr>
                                <td>视觉记忆</td>
                                <td><span id="plevel6"></span>
                                    <!-- <span id="pscore6"></span> -->
                                </td>
                                <td> <span id="nlevel6"></span>
                                    <!-- <span id="nscore6"></span> -->
                                </td>
                                <td class="remark">识字快，记路好。看过的知识点能牢牢记住。</td>
                            </tr>
                            <tr>
                                <td>手部控制</td>
                                <td><span id="plevel7"></span>
                                    <!-- <span id="pscore7"></span> -->
                                </td>
                                <td> <span id="nlevel7"></span>
                                    <!-- <span id="nscore7"></span> -->
                                </td>
                                <td class="remark">控笔能力好，书写流畅，写作业不爱发愁。</td>
                            </tr>
                            <tr>
                                <td>视觉加工</td>
                                <td><span id="plevel8"></span>
                                    <!-- <span id="pscore8"></span> -->
                                </td>
                                <td> <span id="nlevel8"></span>
                                    <!-- <span id="nscore8"></span> -->
                                </td>
                                <td class="remark">阅读理解效率高，抄写速度快，且不爱出错。</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./lib/layui.js" charset="utf-8"></script>
    <script src="./config.js"></script>
    <script src="./lib/echarts.min.js" charset="utf-8"></script>
    <script src="./profileChart.js" charset="utf-8"></script>
    <script src="./typeChart.js" charset="utf-8"></script>
    <script src="./gaugeChart.js" charset="utf-8"></script>
    <script>
        layui.use(["jquery"], function () {
            var $ = layui.$;
            var id = getQueryString("id");
            request($, "get", requestUrl + "/service/focus-service/test/publicApi/checkTest?id=" + id, null, function (res) {
                if (!res[1]) res[1] = res[0];
                var ndata = res[0].data;
                var pdata = res[1].data;
                $("#testCount").text(res[0].testCount);
                $("#name").text(res[0].name);
                $("#sex").text(res[0].sex);
                $("#age").text(res[0].showAge);
                $("#pTest").text(res[1].testDate);
                $("#nTest").text(res[0].testDate);
                for (var i = 0; i < pdata.length; i++) {
                    $("#plevel" + i).text(pdata[i].level);
                    //$("#pscore" + i).text(pdata[i].minScore.toFixed(0) + "%-" + pdata[i].maxScore.toFixed(0) + "%");
                }
                for (var i = 0; i < ndata.length; i++) {

                    var cssClass = ""
                    if (ndata[i].levelScore > pdata[i].levelScore) {
                        cssClass = "green"
                    } else if (ndata[i].levelScore < pdata[i].levelScore) {
                        cssClass = "red"
                    }
                    $("#nlevel" + i).html("<span class='" + cssClass + "'>" + ndata[i].level + "</span>");
                    //$("#nscore" + i).text(ndata[i].minScore.toFixed(0) + "%-" + ndata[i].maxScore.toFixed(0) + "%");
                }
            });
        })
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        function request($, type, url, data, success) {
            $.ajax({
                url: url,
                data: data,
                type: type,
                success: function (res) {
                    success(res)
                }
            })
        }
    </script>
</body>
<style type="text/css">
    @media print {
        @page {
            /* 页面尺寸 */
            size: A4;
            /* 页面边距 */
            margin: 0.5cm 0.5cm 1cm 0.5cm;

        }

        .root {
            background: none !important;
        }

        .no-print {
            display: none;
        }
    }

    .root {
        max-width: 842px;
        margin: 10px auto;
        background-color: #FA9F49;
        padding: 10px;
        height: 100%;
        font-size: 14px;
        overflow-y: auto;
    }

    .print-button {
        width: 100px;
        height: 100px;
        position: fixed;
        right: 20px;
        top: 100px;
        z-index: 99999;
    }

    .page {
        background-color: #fff;
        border-radius: 5px;
        line-height: 30px;
        margin-top: 20px;
    }

    .page .title {
        border-bottom: #FA9F49 solid 1px;
        padding: 10px;
        color: #FA9F49;
        font-size: 18px;
        font-weight: bold;
    }

    .page .title i {
        display: inline-block;
        width: 10px;
        height: 15px;
        margin-right: 5px;
        background-color: #FA9F49;
        font-weight: bold;
    }

    .baseContent {
        padding: 20px 10px;
    }

    .baseContent td {
        width: 25%;
    }

    .baseContent .tableTitle {
        background-color: #FA9F49;
        color: #fff;
        text-align: center;
    }

    .baseContent span {
        padding-left: 5px;
    }

    .baseItem {
        display: flex;
        gap: 5px;
    }

    .baseItem span {
        display: block;
        font-size: 14px;
    }

    .baseItem span:first-child {
        background-color: #FA9F49;
        text-align: center;
        color: #fff;
        width: 40%;
    }

    .pageContent {
        padding: 10px;
    }

    .pageItem {
        font-weight: bold;
        color: #FA9F49;
        font-size: 16px;
    }

    .pageItem i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        background-color: #FA9F49;

        margin-right: 5px;
    }

    p {
        text-indent: 2em;
    }

    .resultTable {
        width: 100%;
        text-align: center;
    }

    .resultTable td {
        border: 1px solid #efefef;
        height: 40px;

    }

    .courseTable {
        width: 100%;
    }

    .courseTable td {
        border: 1px solid #efefef;
        height: 40px;
        padding: 5px;
    }

    .mark {
        line-height: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .mark i {
        width: 15px;
        height: 10px;
        display: inline-block;
    }

    .remark {
        font-size: 12px;
        text-align: left;
    }

    td span {
        display: block;
    }

    .red {
        color: red;
    }

    .green {
        color: green;
    }
</style>


</html>